<template>
	<view class="container">
		<u-navbar leftIconSize="0" placeholder titleStyle="font-size:36rpx;font-weight:600;" title="" bgColor="transparent" :autoBack="false"></u-navbar>
		<view class="title">工具</view>
		<view class="content">
			<view class="content-title">选择工具</view>
			<view class="content-main flex jc_between fw_wrap">
				<view class="content-item" v-for="(item,index) in list">
					<view class="content-item-box" @click="jump(item.id,index)">
						<image class="content-item-image" :src="item.cover"></image>
						<view class="content-item-title">{{item.title}}</view>
					</view>
				</view>
				<!-- <view class="content-item">
					<view class="content-item-box" @click="jump(2)">
						<image class="content-item-image" src="/static/image/nav2.png"></image>
						<view class="content-item-title">视频转绘</view>
					</view>
				</view>
				<view class="content-item">
					<view class="content-item-box" @click="jump(3)">
						<image class="content-item-image" src="/static/image/nav3.png"></image>
						<view class="content-item-title">头像转绘</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				this.get('tool/index').then(res=>{
					this.list = res.data.list&&res.data.list.data
				})
			},
			jump(type,index){
				if(index == 0){ // 头像转绘跳转
					uni.navigateTo({
						url:'/pages/selectStyle/selectStyle?type='+type
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'敬请期待'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		min-height: 100vh;
		background-image: url('@/static/image/bg.png');
		background-size: 100% auto;
		padding:28rpx 46rpx;
	}
	.title{
		font-size: 52rpx;
		color: #333333;
		padding: 0 6rpx;
	}
	.content{
		padding-top: 106rpx;
		&-title{
			font-size: 32rpx;
		}
		&-main{
			margin-top: 70rpx;
		}
		&-item{
			width: 324rpx;
			height: 420rpx;
			padding:10rpx;
			margin-bottom: 10rpx;
			&:hover{
				background-image:url('@/static/image/border.png');
				background-size: 100% 100%;
			}
			&-box{
				border-radius: 20rpx;
				position: relative;
				overflow: hidden;
				width: 100%;
				height: 100%;
			}
			&-image{
				width: 100%;
				height: 100%;
			}
			&-title{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 30rpx;
				font-size: 32rpx;
				color: #ffffff;
			}
		}
	}
</style>
